<template>
  <div class="_wz_cent_main _wz_dataDict">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="120" :rules="ruleValidate">

      <FormItem label="所属区域">
        <i-input v-model="formData.orgName" placeholder="--" clearable disabled />
      </FormItem>
      <FormItem label="运输企业" prop="comUniformSocialCreditCode">
        <i-select v-model="formData.comUniformSocialCreditCode" filterable placeholder="请选择运输企业" clearable :label-in-value="true" @on-change="deptNameFun">
          <Option v-if="!!item.uniformSocialCreditCode" v-for="item in subDeptList" :value="item.uniformSocialCreditCode" :key="item.uniformSocialCreditCode">{{ item.deptName }}</Option>
        </i-select>
      </FormItem>
      <FormItem label="联系人" prop="contacts">
        <i-input v-model="formData.contacts" placeholder="请填写联系人" clearable />
      </FormItem>
      <FormItem label="联系电话" prop="contactsPhone">
        <i-input v-model="formData.contactsPhone" placeholder="请填写联系电话" clearable />
      </FormItem>
      <FormItem label="办理业务" prop="appointmentType">
        <i-select v-model="formData.appointmentType" filterable placeholder="请选择办理业务" clearable :label-in-value="true" @on-change="appointmentTypeFun">
          <Option :value="item.businessType" :key="item.businessType" v-for="item in appointmentTypeList">{{ item.businessValue }}</Option>
        </i-select>
      </FormItem>
      <FormItem label="预约日期" prop="appointmentStartDate">
        <i-select v-model="formData.appointmentStartDate" filterable placeholder="请选择预约日期" clearable :label-in-value="true" @on-change="appointmentTimeFun">
          <Option :value="item" :key="item" v-for="item in appointmentStartDateList">{{ item }}</Option>
        </i-select>
      </FormItem>
      <FormItem label="预约时间" prop="starEnd">
        <i-select v-model="formData.starEnd" filterable placeholder="优先选择办理业务和预约日期" clearable>
          <Option :value="item.startTime" :key="item.startTime" v-for="item in appointmentTimeList">{{ item.startTime +" - "+ item.endTime }}</Option>
        </i-select>
      </FormItem>
      <FormItem label="注意事项"class="_wz_zysx">
        <div>1.一天只可以发布两次预约；</div>
        <div>2.平台使用时间：早8点至晚上24点，凌晨0点至8点，不可使用预约；</div>
        <div>3.可预约时间为当天向后两天；</div>
        <div>4.周六不可预约。</div>
        <div>5.进行预约前，请先进行企业上报。</div>
      </FormItem>
      <div class="demo-drawer-footer">
        <Button @click="$emit('closeFun', false)">取消</Button>
        <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
      </div>
    </Form>
    <Spin size="large" fix v-if="spinShow"></Spin>



  </div>
</template>
<script>


export default {
  props: ["selectData"],//接收来自父组件的数据
  data() {
    return {
      appointmentTypeList:[],//业务字典
      appointmentTimeList:[],//预约时间
      appointmentStartDateList:[],//预约日期下拉
      subDeptList:[],
      options3: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },
      spinShow: false,//本页加载

      formData: {
        starEnd:''
      },//新增修改表单数据

      //验证
      ruleValidate: {
        comUniformSocialCreditCode: [
          {required: true, message: '请选择运输企业', trigger: 'blur'},
        ],
        contacts: [
          {required: true, message: '请填写联系人', trigger: 'blur'},
        ],
        contactsPhone: [
          {required: true, message: '请填写联系电话', trigger: 'blur'},
          {
            validator: (rule, value, callBack) => {
              if (/^[1][0-9]{10}$/.test(value) || /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(value)) {
                callBack()
              } else {
                callBack('请输入手机号 或者 区号-座机号')
              }
            }, trigger: 'blur'
          }
        ],
        appointmentType: [
          {required: true, message: '请选择办理业务', trigger: 'blur'},
        ],
        appointmentStartDate: [
          {required: true, message: '请选择预约日期', trigger: 'blur'},
        ],
        starEnd: [
          {required: true, message: '请选择预约时间', trigger: 'blur'},
        ],

      },
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态
  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;

    if(!!that.selectData && !!that.selectData.id){
      that.formData = JSON.parse(JSON.stringify(that.selectData))
      that.deptCheck();
      that.appointmentTimeFun();
      that.formData.starEnd = that.formData.appointmentStartTime;
    }

      //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList,{}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })




    //预约日期
    that.axios.post(that.apiUrl.appointmentAppointmentDate,{}).then(res => {
      if (!!res) {
        that.appointmentStartDateList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })

  },
  methods: {//执行的方法
    //办理业务
    appointmentTypeFun(data){
      var that = this;
      that.formData.appointmentTypeValue = data.label;
      that.appointmentTimeFun()
    },
    //预约时间
    appointmentTimeFun(){
      var that = this;
      that.appointmentTime = [];
      that.formData.starEnd = '';
      if(!that.formData.appointmentStartDate || !that.formData.appointmentType){
        return false;
      }
      var obj = {
        date:that.formData.appointmentStartDate,
        appointmentCode:that.formData.appointmentType,
        comId:that.formData.comId,
        transportCode:that.formData.comUniformSocialCreditCode,
      }
      //预约时间
      that.axios.post(that.apiUrl.appointmentAppointmentTime,obj).then(res => {
        if (!!res) {
          that.appointmentTimeList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    //企业教研
    deptNameFun(data){
      var that = this;
      that.formData.comName = data.label;

      var starEnd = that.public.extractName(that.subDeptList, [that.formData.comUniformSocialCreditCode], {
        uniqueValue: 'uniformSocialCreditCode',
        nameList: ['contact', 'phone','id','uuid'],
      })
      if(!that.formData.contacts){
        that.formData.contacts = starEnd.contact.join(",");
      }
      if(!that.formData.contactsPhone){
        that.formData.contactsPhone = starEnd.phone.join(",");
      }
      if(!that.formData.comId){
        that.formData.comId = starEnd.uuid.join(",");
      }
      that.deptCheck()
    },
    deptCheck(){
      var that = this;
      var obj = {
        comId:that.formData.comId,
        transportCode:that.formData.comUniformSocialCreditCode,
      }
      //校验企业
      that.axios.post(that.apiUrl.appointmentIntercept,obj).then(res => {
        if (!!res) {
          if(!!res.data.data.businessList && res.data.data.businessList.code == 0){
            that.formData.orgId = res.data.data.sysOrg.uuid
            that.formData.orgName = res.data.data.sysOrg.countyName
            that.appointmentTypeList = res.data.data.businessList.data;
          }else {
            that.$Message.error(res.data.data.businessList.msg);
          }
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    addSubmit(name) {//新增修改提交
      let that = this;
      that.$refs[name].validate((valid) => {
        if (valid) {//正则判断使用

          var starEnd = that.public.extractName(that.appointmentTimeList, [that.formData.starEnd], {
            uniqueValue: 'startTime',
            nameList: ['startTime', 'endTime'],
          })
          that.formData.appointmentStartTime = starEnd.startTime.join(",");
          that.formData.appointmentEndTime = starEnd.endTime.join(",");

          that.axios.post(that.apiUrl.appointmentSaveOrUpdateAppointment, that.formData).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success('保存成功');
              that.$emit('closeFun', true)
            }
          }).catch(err => {
            console.log("失败", err)
          })

        } else {
          this.$Message.error('请正确填写表单');
        }
      })
    },
  },
  watch: {//监听

  },


  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_dataDict {
  display: flex;
  flex-direction: column;
  ._wz_zysx{
    color: #ed4014!important;
    .ivu-form-item-label{
      color: #ed4014!important;
    }
  }
}

</style>
